<template>
	<view :style="{'height':windowHeight+'px'}" @click="selectDeviceClose">
        <uni-nav-bar v-if="type==2&&!showDevice" id="nav" class="u-f-ajc" :height="modelType == 'pad'?54:44" :statusBar="true" :fixed="true">
            <view slot="left"  style="width: 50px;" @click="backAction()">
                <uni-icons type="back" size="25"></uni-icons>
            </view>
            <view class="" style="width: 100%;">
                <template>
                    <view class="u-f-r u-f-ac u-f-ajc" style="width: 100%;" >
                        <text>消息中心</text>
                    </view>
                </template>
            </view>
        </uni-nav-bar>
		<uni-nav-bar v-else id="nav" class="u-f-ajc" :height="modelType == 'pad'?54:44" :statusBar="true" :fixed="true">
			<view slot="left"  style="width: 50px;" @click="backAction()">
				<uni-icons type="back" size="25"></uni-icons>
			</view>
			<view class="" style="width: 100%;">
				<template>
					<view class="u-f-r u-f-ac u-f-ajc" style="width: 100%;" @click.stop="showDeviceList(1)">
						<view class="navTitle" style="font-weight: 800">{{device.deviceName}}</view>
						<uni-icons v-if="type==2" :type="visible1?'top':'bottom'" size="20"></uni-icons>
					</view>
					<view v-if="visible1" class="selectDevice selectDevice2" :style="{top:navPopupHeight}">
						<view class="selectItem u-f-ajc"
							:class="{'selected':item.isSelected,'border':index!==deviceList.length-1}"
							v-for="(item,index) in deviceList" :key="index" @click.stop="selectDevice(item, 1)">
                            <image v-if="!item.readStatus" src="https://statics.xmcsrv.net/weixin/update.png" style="width: 40rpx;height: 40rpx;"/>
                            {{item.deviceName}}
						</view>
					</view>
				</template>
			</view>
		</uni-nav-bar>
        <view class="content-box" :style="{height: eventHeight+'px'}">
            <view v-if="type == 2" class="tab-bar-box">
                <view v-for="(item, i) in tabList" :key="i" class="tab-bar-item" :class="{'active': item.selected?'active':''}" @click="changeTab(i)">
                    <view>
                        <view>
                            <text>{{ item.title }}</text>
                            <image v-if="item.message" class="img-point" src="https://statics.xmcsrv.net/weixin/update.png"></image>
                        </view>
                    </view>
                    <view v-show="item.selected" class="point"></view>
                </view>
            </view>
            <view v-if="currentTab === 0" class="tab-swiper-box" :style="{height: showMessageHeight+'px'}">
                <view class="" style="width: 100%;background-color:#f5f7fb;">
                    <template>
                        <view class="u-f-r u-f-ac u-f-ajc" style="width: 100%;justify-content: left;margin-left: 6px;padding: 10px 0 8px" @click.stop="showDeviceList(2)">
                            <view class="navTitle" style="font-weight: 800">{{device.deviceName}}</view>
                            <uni-icons v-if="type==2" :type="visible2?'top':'bottom'" size="20"></uni-icons>
                        </view>
                        <view style="position: relative">
                            <view v-if="visible2" class="selectDevice" style="top: 2px">
                                <view class="selectItem long-title"
                                      :class="{'selected':item.isSelected,'border':index!==deviceList.length-1}"
                                      v-for="(item,index) in deviceList" :key="index" @click.stop="selectDevice(item, 2)">
                                    <image v-if="!item.readStatus" src="https://statics.xmcsrv.net/weixin/update.png" style="width: 40rpx;height: 40rpx;"/>
                                    {{item.deviceName}}
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="headerFixed" v-if="isTap" :style="{top: topHeight}">
                    <view class="header" :style="{height: videoHeight+'px'}" v-if="!currentVideo.url">
                        <image v-if="currentVideo.picUrl&&!videoInfo"
                               :src="currentVideo.picUrl"
                               class="img" :class="{'previewPic':currentVideo.picUrl}" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else-if="alarmEvent=='DoorLockClose'"
                               src="https://statics.xmcsrv.net/weixin/msg/noLock.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else-if="alarmEvent=='DoorLockOpen'"
                               src="https://statics.xmcsrv.net/weixin/msg/noUnlock.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else-if="alarmEvent=='DoorLockAlarm'"
                               src="https://statics.xmcsrv.net/weixin/msg/nolowBattery.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else-if="alarmEvent=='DoorLockCall'"
                               src="https://statics.xmcsrv.net/weixin/msg/nophone.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else-if="alarmEvent=='DoorLockNotify'"
                               src="https://statics.xmcsrv.net/weixin/msg/noDoorbell.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                        <image v-else
                               src="https://statics.xmcsrv.net/weixin/msg/noPicture.png"
                               class="img img2" mode="heightFix"
                               @click="previewImage(currentVideo.picUrl)"></image>
                    </view>
                    <view class="header" :style="{height: videoHeight+'px'}" v-if="currentVideo.url">
                        <ts-video v-if="currentVideo.url" id="video" :height="videoHeight" :src="currentVideo.url"
                                  :autoplay="true" :loop="false" ref="video" :scale="[minH/300, minH/300]" @fullscreen="fullScreenFn" @escScreen="blackFullScreen"/>
                    </view>
                </view>
                <view v-if="list.length == 0 && emptyFlag==1 && !isTap" class="u-f-ajc u-f-c noData"
                      :style="{marginTop:isTap?'680rpx':'350rpx'}">
                    <image style="width: 207px; height: 207px" src="https://statics.xmcsrv.net/weixin/msg/NoMessage1.png"></image>
                </view>
                <template v-else>
                    <scroll-view id="stepId" v-show="!isTap" class="step" :style="{height: showMessageHeight-40+'px'}" scroll-y
                                 style="width: 100%;padding-bottom:50px" :refresher-enabled="true" :refresher-threshold="100"
                                 refresher-default-style="white" refresher-background="#f5f7fb" :refresher-triggered="triggered"
                                 :paging-enabled="true" :enable-passive="true" @scrolltolower='scrolltolower'
                                 @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                                 @refresherabort="onAbort">
                        <view style="display: flex;flex-direction: column" v-for="(item,index) in list" :key="index">
                            <view class="title-box">
                                <view class="title">{{item.date}}</view>
                            </view>
                            <view class="con">
                                <view class="itemList u-f-c" >
                                    <view class="u-f-ac item" v-for="(item2,index2) in item.origin" :key="index2"
                                          style="position: relative;margin-top: 10rpx;">
                                        <view class="step-line step-line--before" style="left: -20px;"
                                              :style="{background:item2.selected?'#FF0025':'#D9D9D9'}"></view>
                                        <j-cell-slider :key="index" ref="jcell" :translate-x="item2.VideoInfo?90:90"
                                                       :more="false" :action="true" :isTouch="isTouch" style="width: 100%;"
                                                       @jfdelete="deleteLockAlarmMSg(item2)" @longpress="longPressAction(item2)"
                                                       @jftap="itemClick(item2)">
                                            <view slot="icon" class="icon-box">
                                                <!-- DoorBell访客来电 Remote远程开锁 StayAlarm逗留报警-->
                                                <img class="img" :src="item2.AlarmMsgIcon" alt="">
                                            </view>
                                            <view slot="title" class="time" style="font-size: 13px">{{item2.AlarmTime}}</view>
                                            <view slot="subTitle" class="type"  style="font-size: 13px">{{item2.totalDesc}}</view>
                                            <view slot="tips" class="" style="position: relative;display: flex;padding: 10rpx;">
                                                <view v-if="item2.isCapture&&item2.alarmImageUrl" class="img-box">
                                                    <image class="pic1" :src="item2.alarmImageUrl?item2.alarmImageUrl:''"
                                                           @error="imgError(item2, index2)"
                                                    ></image>
                                                    <image v-if="item2.VideoInfo" class="play"
                                                           src="https://statics.xmcsrv.net/weixin/play.png" mode=""></image>
                                                </view>
                                                <view v-else class="pic">
                                                </view>
                                            </view>
                                        </j-cell-slider>
                                    </view>
                                </view>
                                <view class="step-container">
                                    <view class="step-line-item">
                                        <view class="step-line step-line--after"
                                              :class="[index==0?'step-line--after2':index==list.length-1?'step-line--after3':'step-line--after']">
                                        </view>
                                        <view class="leftLine"></view>
                                    </view>
                                </view>
                            </view>

                        </view>
                    </scroll-view>
                </template>
                <view class="u-f-sbc bottomV" v-if="screenStatus">
                    <uni-datetime-picker class="padPicker" type="daterange" :clear-icon="false" v-model="range" @change="change"
                                         @maskClick="maskClick"  v-if="!reloading" :alarm-list="msgAlarmList" @getAlarm="getMsgCalendar">
                        <view class="u-f-r u-f-ajc date">
                            <view class="u-f-ajc calendar">
                                <image src="https://statics.xmcsrv.net/weixin/calendar2.png" mode=""></image>
                                <text v-if="day">{{day}}天</text>
                            </view>
                        </view>
                    </uni-datetime-picker>
                    <view class="u-f-r" @click="showMsg">
                        <view class="u-f-r msg">
                            <text class="all">{{msgType}}</text>
                            <uni-icons v-if="isShowMsg" type="bottom" color="#3E3E3E" size="20" />
                            <uni-icons v-else type="top" color="#3E3E3E" size="20" />
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="currentTab === 1" class="tab-swiper-box" :style="{height: showMessageHeight+50+'px'}">
                <msg-card ref="msgCard" :system-msg-list="systemMsgList" :systemMsgNum="systemMsgNum" :device="device" @getNextPage="queryMsgList"></msg-card>
            </view>
        </view>
		<!-- 弹框显示数据列表 -->
		<uni-popup id="dataPopup" ref="dataPopup" class="dataPopup" maskBackgroundColor="transparent"
			:isMaskClick="false" type="bottom" :maskType="maskType" :safeArea="false">
			<view class="box thisasf" :class="{'box1':isSlider}" :style="{height:popupHeight}">
				<view class="step" style="margin-top: 10rpx;padding-bottom: 0rpx;">
					<view v-if="list.length == 0 && emptyFlag==1" class="u-f-ajc u-f-c noData"
						:style="{marginTop:isTap?'150rpx':'220rpx'}">
                        <image style="width: 207px; height: 207px" src="https://statics.xmcsrv.net/weixin/msg/NoMessage.png"></image>
					</view>
					<scroll-view class="step" style="background: #F8F8F8;" :style="{height:scrollViewHeight}"
						scroll-y="true" :paging-enabled="true" :refresher-enabled="true" :refresher-threshold="50"
						refresher-default-style="white" refresher-background="#f8f8f8" :enable-passive="true"
						:refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower='scrolltolower'>
						<view>
							<view class="pullUp pullUp1" @click="changeHeight" @touchstart="onTouchStart"
								@touchmove.stop="getstart($event)" @touchend="getend" v-if="list.length">
								<image v-if="!isChange" src="https://statics.xmcsrv.net/weixin/pullUp.png"
									style="transform:rotate(180deg);"></image>
								<image v-else src="https://statics.xmcsrv.net/weixin/pullUp.png"></image>
							</view>
							<view style="margin-top: -86rpx">
								<view class="con" v-for="(item,index) in list" :key="index">
									<view class="itemList u-f-c"
										:style="{paddingBottom:index == list.length-1?'0rpx':'20rpx'}">
										<view class="title1">{{item.date}}</view>
										<view class="u-f-ac item" style="position: relative;"
											v-for="(item2,index2) in item.origin" :key="index2">
											<view class="step-line step-line--before" style="left:-20px"
												:style="{background:item2.selected?'#FF0025':'#D9D9D9'}"></view>
											<j-cell-slider ref="jcell" :translate-x="item2.VideoInfo?90:90"
												:more="false" :action="true" style="width: 100%;"
												@jfdelete="deleteLockAlarmMSg(item2)"
												@longpress="longPressAction(item2)" @jftap="itemClick(item2)">
												<view slot="icon" class="icon-box">
													<!--DoorBell访客来电 Remote远程开锁 StayAlarm逗留报警-->
													<img class="img" :src="item2.AlarmMsgIcon" alt="">
												</view>
												<view slot="title" class="time">{{item2.AlarmTime}}</view>
												<view slot="subTitle" class="type">{{item2.totalDesc}}</view>
												<view slot="tips" class=""
													style="position: relative;display: flex;padding: 10rpx;">
													<view v-if="item2.isCapture&&item2.alarmImageUrl" class="img-box">
														<image
                                                            class="pic1"
                                                            @error="imgError(item2, index2)"
															:src="item2.alarmImageUrl?item2.alarmImageUrl:''"
                                                        ></image>
														<image v-if="item2.VideoInfo" class="play"
															src="https://statics.xmcsrv.net/weixin/play.png" mode="">
														</image>
													</view>
													<view v-else class="pic"></view>
												</view>
											</j-cell-slider>
										</view>
									</view>
									<view class="step-container">
										<view class="step-line-item">
											<view class="step-line step-line--after"
												:class="[index==0?'step-line--after2':index==list.length-1?'step-line--after3':'step-line--after']">
											</view>
											<view class="leftLine"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" class="msgPopup" style="z-index: 12;" type="bottom">
			<view>
				<j-cell-group>
					<view class="popup-content">
						<view class="u-f-c" style="background:#FFFFFF;padding:30rpx;">
							<view class="u-f-c" v-for="(item,index) in typeList" :key="index"
								@click="selectMsgType(item)">
								<view class="u-f-sbc msgType">
									<text>{{item.title}}</text>
									<uni-icons v-if="!item.selected" type="circle" color="#e5e5e5" size="30">
									</uni-icons>
									<uni-icons v-else type="checkbox" color="#FF0025" size="30"></uni-icons>
								</view>
								<view v-if="index!=typeList.length-1" class="b-line"></view>
							</view>
						</view>
					</view>
				</j-cell-group>
				<view style="padding:0 20rpx 20rpx">
					<button type="default" plain
						style="width: 100%;color: #FF0025 !important;border-color: #dcdcdc !important;background-color: #FFFFFF !important;"
						@click="closePopup">取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupLong" class="msgPopup" style="z-index: 12;" type="bottom">
			<view>
				<j-cell-group>
					<view class="popup-content">
						<view v-if="isEdit" @click="longChang('editName')" class="u-f-c"
							style="background:#FFFFFF;padding:30rpx;text-align: center;">
							修改消息昵称
						</view>
						<view @click="longChang('share')" class="u-f-c"
							style="background:#FFFFFF;padding:30rpx;text-align: center;">
							分享
						</view>
						<view @click="longChang('delete')" class="u-f-c"
							style="background:#FFFFFF;padding:30rpx;color: red;text-align: center;">
							删除
						</view>
					</view>
				</j-cell-group>
				<view style="padding:0 20rpx 20rpx">
					<button type="default" plain
						style="width: 100%;color: #FF0025 !important;border-color: #dcdcdc !important;background-color: #FFFFFF !important;"
						@click="closePopup">取消</button>
				</view>
			</view>
		</uni-popup>
		<j-previewImage ref="previewImage" :urls="imgs" />
	</view>
</template>

<script>
	// import CloudEventList from "@/jvss/pagesDevice/device/device-live/door-lock/components/cloudEventList.vue";

    const {
		getDiffDay,
		getBeforeDay,
		isDoorLock,
		formatDate,
		AlarmMsgIcon
	} = require('@/utils/util.js');
	const { msgInfoPrs,msgTypeIsEditArr} = require('@/utils/msgInfoPrs.js');
    import {queryMsgList} from "@/API/request_v3";
    let constant = getApp().globalData.constant;
	import moment from "moment";
	import tsVideo from "@/jvss/pagesDevice/components/j-video/j-video.vue";
    import msgCard from "@/jvss/pagesDevice/device/device-live/door-lock/components/msgCard.vue";
	import {
		GeneralAlarmMsg,
		AlarmMsg
	} from '@/utils/alarmMsg.js'
	let EE_DEV_SMARTDOORLOCK3 = constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK3;
	let EE_DEV_SMARTDOORLOCK8 = constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK8;
	export default {
		components:{
            // CloudEventList,
			tsVideo,
            msgCard
		},
		data() {
			return {
				reloading:false,
                options: null,
                showDevice: false,
				emptyFlag: 0,
				device: '',
				videoContext: null,
				currentVideo: {
					key: '',
					url: '',
					picUrl: ''
				},
				range: '',
				day: 1,
				filterTypeItem: {},
				typeList: [{
						title: '全部消息',
						value: 'all',
						id: 0,
						selected: true
					},
					{
						title: '门锁通知',
						value: 'DoorLockNotify',
						id: 1,
						selected: false
					},
					{
						title: '来电提醒',
						value: 'DoorLockCall',
						id: 2,
						selected: false
					},
					{
						title: '异常消息',
						value: 'DoorLockAlarm',
						id: 3,
						selected: false
					}
				],
				channelType: '所有通道',
				isShowMsg: false,
				msgType: '全部信息',
				active: -1,
				sourceList: [],
				list: [],
				startTime: '',
				endTime: '',
				tempArr: [],
				deviceName: '',
				deviceList: [],
				visible1: false,
                visible2: false,
				type: 1,
				isTap: false,
				isChange: false,
				popupHeight: '',
				videoHeight: 300, // video高度
				navHeight: 0, // navBar高度
				statusBarHeight: 0, // 手机状态栏高度
				tempHeight: '',
				maskType: 1,
				statusHeight: '',
				navPopupHeight: '',
				windowHeight: '',
				messageItem: null,
				jsonAlarmMsg: {},
				downloadUrl: '',
				videoData: {},
				clickItem: {},
				isDownloadPic: true,
				isTouch: true,
				queryAlarmId: null,
				total: 1,
				page: 1,
				pageSize: 10,
				messageInfo: {},
				isEdit: false,
				editInfo: {},
				selectedAlarmEvent: '',
				selectedAlarmId: '',
				picList: [],
				currentHeight: 0, // 滑动组件当前高度
				scrollViewHeight: 0, //用于计算滚动区域高度
                showMessageHeight: 0, // 云事件页面可滚动的高度
                eventHeight: 0,  // 容器高度
				freshing: false,
				triggered: true,
				isBK: true,
				isMore: false,
				isSlider: false,
				startClientY: 0,
				infoHight: 0,
				isHeight: false,
				modelType: null,
				imgs: [],
				isShowShare: true,
				minH: 0,
				first: true,
				topHeight: 0,
				showNav: true,
                msgAlarmList: [],
                lowBattery: 'https://statics.xmcsrv.net/weixin/callPolice.png',
                pviewUrl: 'https://statics.xmcsrv.net/weixin/defaultMsgBg2.png',
				pullDownRefresh: false,
				isDoorLock: true,
                num: 0,
                videoInfo: null,
                screenStatus: true,
                alarmEvent: '',
                MsgType: '',
                opt: null,
                nowFamilyDeviceId: [],
                systemMsgList: [''],  // device
                systemMsgNum: 0,
                currentTab: 0,
                tabList: [
                    {
                        title: '云事件',
                        selected: true,
                        message: false
                    },
                    {
                        title: '系统通知',
                        selected: false,
                        message: false
                    },
                ],
                msgCardLimit: 10
			}
		},
        watch: {
            device: {
                handler(n, o) {
                    console.log(n, 'watch')
                    if(n.token) {
                        const list = getBeforeDay(-6).split('-')
                        this.getMsgCalendar(+list[0], +list[1])
                        let readStatus = uni.getStorageSync('readStatus')
                        // readStatus.forEach(item => item.deviceNo == n.deviceNo).readStatus
                        // 是否有未读消息
                        if(readStatus.length) {
                            if(readStatus.filter(item => item.deviceNo == n.deviceNo)[0].readStatus) {
                                this.tabList[0].message = false
                            } else {
                                this.tabList[0].message = true
                                readStatus.forEach(item2 => {
                                    if(item2.deviceNo == n.deviceNo) {
                                        item2.readStatus = true
                                    }
                                })
                                uni.setStorageSync('readStatus', readStatus)
                                this.deviceList.forEach(item => {
                                    readStatus.forEach(item2 => {
                                        if(item.deviceNo === item2.deviceNo) {
                                            item.readStatus = item2.readStatus
                                        }
                                    })
                                })
                            }
                        }
                    }
                },
                immediate: false,
                deep: true
            }
        },
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: (res) => {
					console.log('系统信息', res);
					this.modelType = res.deviceType;
					let navHeight = this.modelType == 'pad' ? 54 : 44
					this.navHeight = navHeight
					this.topHeight = this.statusHeight
					let deviceModel = res.deviceModel
					let info = uni.createSelectorQuery().select("#nav");
					info.boundingClientRect((data) => {
						this.tempHeight = res.windowHeight - 300 - res.statusBarHeight - navHeight
						// this.popupHeight = this.tempHeight + 'px'
						this.popupHeight = this.tempHeight + 4 + 'px'
						this.scrollViewHeight = (this.tempHeight - 50 ) + 'px'
						this.statusBarHeight = res.statusBarHeight
						this.infoHight = res.screenHeight - res.statusBarHeight - navHeight - 50
						console.log('弹窗高度:===', this.popupHeight, this.scrollViewHeight, this
							.infoHight, this.tempHeight);
						this.minH = this.windowHeight - (this.tempHeight + 150) - this
							.statusBarHeight - (this.modelType == 'pad' ? 54 : 44)
					}).exec()
				}
			});
			this.$nextTick(() => {
				// this.getClineHeight();
			})
		},
		onLoad: function(options) {
            this.options = options
            console.log(options.size, 'pageSize')
            this.videoInfo = options.videoInfo
            this.pageSize = options.size? options.size*10+10: 10
			const sys = uni.getSystemInfoSync();
            console.log(sys, '手机相关设置')
            const phoneType = this.modelType === 'pad'?54:44
            if(options.type == 2) {
                console.log('type的值', options.type)
                this.showMessageHeight = sys.screenHeight-44-50-70-phoneType
            } else {
                this.showMessageHeight = sys.screenHeight-44-50-phoneType
            }
            this.eventHeight = sys.screenHeight-44-phoneType
            console.log( this.showMessageHeight, '可视区域像素')
			this.windowHeight = sys.windowHeight;
			this.queryAlarmId = options.queryAlarmId ? options.queryAlarmId : null
			this.statusHeight = (sys.statusBarHeight + 44) + 'px';
			this.navPopupHeight = (sys.statusBarHeight + 46) + 'px';
			let currentDate = new Date().toJSON().split('T')[0]
			// this.startTime = currentDate + ' ' +'00:00:00'
			this.startTime = getBeforeDay(-6) + ' ' + '00:00:00'
			// this.endTime = currentDate + ' ' + '23:59:59'
			this.endTime = getBeforeDay(0) + ' ' + '23:59:59'
			this.single = new Date().toJSON().split('T')[0]
			this.range = [getBeforeDay(-6), getBeforeDay(0)]
			this.day = 7
			this.navHeightChange(0)
            if(options.deviceList) {
                this.nowFamilyDeviceId = JSON.parse(options.deviceList)
            }
			if (options.type) {
				this.type = options.type
                console.log(this.type, '获取type属性')
			}
			if (options.onTap) {
				this.isTap = true;
				this.$refs.dataPopup.open()
			}
			if (this.type == 2) { // 首页跳转过来的
                console.log('首页跳转过来的')
                this.opt = options
				this.getDeviceListByPage()
			} else {
				let enData = decodeURIComponent(options.device)
				this.device = JSON.parse(enData);
				// this.getMsgList()
                console.log('不是首页过来的')
				this.getMsgName()
				if (this.type == 3) { //从公众号消息跳转过来的
					this.selectedAlarmId = this.device.alarmId
					this.selectedAlarmEvent = this.device.alarmEvent
				}
				this.isDoorLock = isDoorLock().some(item => item === this.device.pid || this.device.parentPid)
			}
			if (this.device.pid == EE_DEV_SMARTDOORLOCK3 || this.device.pid == EE_DEV_SMARTDOORLOCK8) {
				this.jsonAlarmMsg = AlarmMsg
				this.isBK = true
			} else {
				this.jsonAlarmMsg = GeneralAlarmMsg
				this.isBK = false
			}
			this.filterTypeItem = this.typeList[0]
			uni.$on('editMsgNickname', () => {
				console.log('修改昵称了？？？？？')
				this.getMsgName()
			})
		},
		onShow() {
		},
		//上拉加载
		onReachBottom() {
			console.log('加载更多', this.isMore, this.page);
			if (this.isMore) {
				this.page++
				this.getMsgList((this.filterTypeItem && this.filterTypeItem.value) || 'all', '', true)
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.page = 1
			this.getMsgList((this.filterTypeItem && this.filterTypeItem.value) || 'all')
		},
		onUnload() {
			uni.$off('editMsgNickname')
			uni.$emit('backCloudMsg', {
				isBack: true
			})
		},
		methods: {
            // 获取报警信息的日期
            getMsgCalendar(year, month) {
                console.log('TOKEN', this.device.token, this.device)
                const timeList = getBeforeDay(0).split('-')
                const app_KEY = getApp().globalData.api.appKey
                // const token = 'OGYzMzRiYWQyYXxiYmU5YTY4YWEzNDEyZjI2fHwx1NzAwMDk5NzA2NDAyfDF8MTAxLjY5LjI0Mi4xMHwx.9c9b04e9dc755c28f868865a617c67f6'
                const token = this.device.token
                if(token) {
                    const data = {
                        type:"MSG",//VIDEO：查询视频日历节点   MSG：查询报警消息日历节点
                        month: +month,
                        year: +year,
                        sn: this.device.deviceNo,//设备序列号
                        channel: 0,
                        appKey: app_KEY,
                        deviceType:0// 0：普通设备;1: 国标设备
                    }
                    getApp().globalData.api.getMsgCalendar(data, token, (res) => {
                        console.log('TOKEN 获取日历报警信息日期', res);
                        this.msgAlarmList = []
                        let list = res
                        list.forEach((item, index) => {
                            if(item.is_exist) {
                                this.msgAlarmList.push(item)
                            }
                        })
                        console.log(this.msgAlarmList, '有告警消息的日期')
                    })
                }
            },
            queryMsgList(data) {
                uni.showLoading({
                    title: '加载中',
                    mask: true
                })
                queryMsgList(data, this.device.token).then(res => {
                    let logInfo = res.data[0]
                    this.systemMsgNum = res.total
                    let resList = res.data.map(item => {
                        item.logInfo = JSON.parse(item.logInfo)
                        item.dateTime = moment(new Date(item.createTime)).format('YYYY-MM-DD HH:mm:ss').split(' ')[0]
                        item.time = moment(new Date(item.createTime)).format('YYYY-MM-DD HH:mm:ss').split(' ')[1]
                        return item
                    })
                    resList.sort((a, b) => {
                        return b.createTime - a.createTime
                    })
                    let dataList = resList.map(item => item.dateTime)
                    dataList = [...new Set(dataList)]
                    let msgList = []
                    let weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
                    dataList.forEach((item, index) => {
                        msgList[index] = {
                            time: item,
                            week: weekList[new Date(item).getDay()],
                            list: []
                        }
                    })
                    let userInfo = uni.getStorageSync('userInfo')
                    resList.forEach((item, index) => {
                        msgList.forEach((item2, index2) => {
                            if(item.dateTime === item2.time && item.accountId === userInfo.id) {
                                item2.list.push(item)
                            }
                        })
                    })
                    if(resList.length<this.msgCardLimit) {this.$refs.msgCard.loadingFlag = 2}
                    else {this.$refs.msgCard.loadingFlag = 1}
                    if(data.page === 1) {
                        this.systemMsgList = [...msgList]
                    }
                    else {
                        if(msgList.length&&msgList[0].list.length) {
                            this.$refs.msgCard.loadingFlag = 0
                            if (resList.length<this.msgCardLimit) {
                                this.$refs.msgCard.loadingFlag = 2
                            }
                            if(msgList[0].time === this.systemMsgList[this.systemMsgList.length-1].time) {
                                this.systemMsgList[this.systemMsgList.length-1].list = this.systemMsgList[this.systemMsgList.length-1].list.concat(msgList[0].list)
                                msgList.shift()
                            }
                        } else {
                            this.$refs.msgCard.loadingFlag = 2;
                            return
                        }
                        if(msgList.length) {
                            this.systemMsgList = this.systemMsgList.concat(msgList)
                        }
                    }
                }).catch((err) => {
                    console.log(err, '错误')
                    uni.showToast({
                        icon: 'none',
                        title: '未知错误'
                    })
                    this.$logs({info: '获取系统消息错误', err: err})
                    // this.systemMsgList = []
                }).finally(() => {
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 200)
                })
            },
            changeTab(i) {
                this.tabList.forEach(item => item.selected = false)
                this.tabList[i].selected = true
                this.currentTab = i
                this.systemMsgList = ['']
                if(i === 1) {
                    let data = {
                        page: 1,
                        limit: this.msgCardLimit,
                        // deviceSn: this.device.deviceNo
                    }
                    if(this.$refs.msgCard) {
                        this.$refs.msgCard.loadingFlag = 0
                        this.$refs.msgCard.page = 1
                    }
                    this.queryMsgList(data)
                }
            },
            // 切换家庭重置显示数据
            onReset() {
                this.startTime = getBeforeDay(-6) + ' ' + '00:00:00'
                this.endTime = getBeforeDay(0) + ' ' + '23:59:59'
                this.single = new Date().toJSON().split('T')[0]
								setTimeout(()=>{
									this.range = [getBeforeDay(-6), getBeforeDay(0)]
									this.reloading = false
								},10)
								this.day = 7
                // this.day = 7
							this.typeList.forEach((item) => {
                    item.selected = false
                })
                this.typeList[0].selected = true
                this.filterTypeItem = this.typeList[0]
                this.msgType = this.filterTypeItem.title
                this.page = 1
            },
            // 默认加载
            showItem(opt, callback) {
                let readStatus = uni.getStorageSync('readStatus')
                // console.log(readStatus, '告警')
                let alarmList = readStatus.filter(item => item.readStatus===false)
                let parent, msgList, parentDeviceList, nowItem=[]
                this.deviceList.forEach(item => {
                    readStatus.forEach(item2 => {
                        if(item.deviceNo === item2.deviceNo) {
                            item.readStatus = item2.readStatus
                        }
                    })
                })
                // 当前家庭，有设备，设备有消息，显示
                // 无设备，显示有消息的设备，
                /**
                 * alarmList  收到设备告警且未读的设备序列号  组
                 * parentDeviceList  当前家庭下的设备序列号 组
                 *
                 * */
                if(opt.deviceList) {
                    // 当前家庭下有设备
                    parentDeviceList = JSON.parse(opt.deviceList)
                    // this.nowFamilyDeviceId = parentDeviceList
                    // 筛选当前家庭下有告警消息的设备
                    for(let i=0; i < parentDeviceList.length; i++) {
                        for(let j=0; j<alarmList.length; j++) {
                            if(parentDeviceList[i] === alarmList[j].deviceNo) {
                                // console.log('当前家庭下有告警消息的设备序列号', parentDeviceList[i])
                                nowItem.push(parentDeviceList[i])
                                break
                            } else continue
                        }
                    }
                    console.log(nowItem, 'nowItem')
                    // 判断当前家庭下是否有告警设备
                    if(!nowItem.length) {
                        // console.log(alarmList, 'alarmList')
                        console.log(this.deviceList[0], alarmList, parentDeviceList, 'nowItem dsfasd')
                        // nowItem = [this.deviceList[0].deviceNo]
                        if(alarmList.length) nowItem = [alarmList[0].deviceNo]
                        if(!alarmList.length) nowItem = [this.deviceList[0].deviceNo]
                    }
                    this.deviceList.forEach(item => {
                        // console.log(item.deviceNo, nowItem, '12312345')
                        if(item.deviceNo == nowItem[0]) {
                            console.log(item, 12312312341)
                            item.isSelected = true
                            this.device = {...item}
                        }
                    })
                    // readStatus.forEach(item => {
                    //     if(item.deviceNo == nowItem[0]){
                    //         item.readStatus = true
                    //     }
                    // })
                    // uni.setStorageSync('readStatus', readStatus)
                    this.$nextTick(() => {
                        callback()
                    })
                } else {
                    // 当前家庭下没有设备，优先显示有告警消息的设备。
                    // 没有告警消息的设备默认展示列表中第一个设备
                    if(alarmList.length) {
                        this.deviceList.forEach(item => {
                            if(item.deviceNo == alarmList[0].deviceNo) {
                                item.isSelected = true
                                this.device = item
                                console.log('走了这哪里')
                            }
                        })
                        readStatus.forEach(item => {
                            if(item.deviceNo == alarmList[0].deviceNo){
                                item.readStatus = true
                            }
                        })
                        uni.setStorageSync('readStatus', readStatus)
                    } else {
                        this.deviceList[0].isSelected = true
                        this.device = this.deviceList[0]
                    }
                    console.log(this.device, alarmList[0], this.deviceList[0], 'device走了那个')
                    this.$nextTick(() => {
                        callback()
                    })
                }
            },
            // 图片加载失败
            imgError(item, index) {
                console.log('图片加载失败', item)
                if(item.alarmImageUrl&&item.isCapture) item.alarmImageUrl = this.pviewUrl
            },
            // 全屏
            fullScreenFn() {
                console.log(this.videoHeight, this.infoHight);
                console.log(this.windowHeight, this.statusHeight, this.topHeight)
                let topH = this.modelType == 'pad' ? 54 : 44
                const sys = uni.getSystemInfoSync();
                console.log(sys)
                this.videoHeight = this.windowHeight - sys.statusBarHeight - topH
                this.$refs.dataPopup.close()
                this.$refs.video.handleFn(1)
                this.screenStatus = false
            },
            // 退出全屏
            blackFullScreen() {
                const topBarHeight = (this.modelType == 'pad' ? 54 : 44)
                if (this.isChange) {
                    this.popupHeight = (this.tempHeight + 4 + 150) + 'px'
                    this.scrollViewHeight = (this.tempHeight + 150 - 50) + 'px'
                    this.videoHeight = this.windowHeight - (this.tempHeight + 150) - this.statusBarHeight - topBarHeight
                    if (this.currentVideo.url) {
                        console.log(this.$refs)
                        this.$refs.video.handleFn(0)
                    }
                } else {
                    this.popupHeight = this.tempHeight + 4 + 'px'
                    this.scrollViewHeight = (this.tempHeight - 50) + 'px'
                    this.videoHeight = 300
                    if (this.currentVideo.url) {
                        console.log(this.$refs)
                        this.$refs.video.handleFn(1)
                    }
                }
                this.$refs.dataPopup.open()
                this.screenStatus = true
            },
			// 改变nav高度
			navHeightChange(status) {
				if (status === 0) {
					// 第一次执行是设置高度
					console.log('高度初始化')
					this.topHeight = this.statusHeight
					this.showNav = true
				} else if (status === 1) {
					console.log('设置高度')
					// 设置高度
					this.topHeight = 0
					this.showNav = false
				}
			},
			//获取可视区域高度
			getClineHeight() {
				let navHeight = this.modelType == 'pad' ? 54 : 44
				uni.getSystemInfo({
					success: (res => {
						this.infoHight = res.windowHeight - 70;
						const query = uni.createSelectorQuery().select("#stepId");
						query.boundingClientRect((data) => {
							if (data) {
								this.infoHight = (res.screenHeight - res.safeAreaInsets.bottom -
									res.statusBarHeight - navHeight) * (750 / res
									.windowWidth) - 80
							}
							this.isHeight = true
							console.log('滚动高度', this.infoHight, data, res);
						}).exec(resu => {});
					})
				});
			},
			onTouchStart(e) {
				this.startClientY = e.touches[0].clientY
			},
			getstart(e) {
				this.isSlider = false
			},
			getend(e) {
				let clientY = e.changedTouches[0].clientY
				this.isSlider = true
				const topBarHeight = (this.modelType == 'pad' ? 54 : 44)
				if (this.startClientY < clientY) {
					// 下滑
					this.popupHeight = this.tempHeight + 4 + 'px'
					this.isChange = !this.isChange
					this.scrollViewHeight = (this.tempHeight - 50) + 'px'
					this.videoHeight = 300
				} else if (this.startClientY > clientY) {
					// 上滑
					this.popupHeight = (this.tempHeight + 4 + 150) + 'px'
					this.isChange = !this.isChange
					this.scrollViewHeight = (this.tempHeight + 150 - 50) + 'px'
					this.videoHeight = this.windowHeight - (this.tempHeight + 150) - this.statusBarHeight - topBarHeight
				}
				console.log('滑动改变高度', this.isChange, this.popupHeight, this.tempHeight, this.scrollViewHeight);
			},
			//上拉加载分页
			scrolltolower() {
				console.log('上拉加载');
				if (this.isMore) {
					this.page++
					this.getMsgList((this.filterTypeItem && this.filterTypeItem.value) || 'all', '', true)
				}
			},
			onPulling(e) {
			},
			onRefresh() {
				console.log('下拉刷新')
                this.first = true
				this.pullDownRefresh = true
				if (this.freshing) return
				this.freshing = true
				this.triggered = true
				this.page = 1
				if (!(this.type == 2 && this.deviceList.length == 0)) {
					this.getMsgList((this.filterTypeItem && this.filterTypeItem.value) || 'all')
				}
				setTimeout(() => {
					this.triggered = false
					this.freshing = false
				}, 1000)
			},
			onRestore(e) {
				console.log('onRestore:', e)
			},

			onAbort(e) {
				console.log('onAbort', e)
			},
			selectDeviceClose() {
                this.visible1 = false;
                this.visible2 = false;
			},
			error(e) {
				console.log('视频播放出错==', e);
			},
			backAction() {
				console.log(this.type)
				if (this.type == 3) {
					uni.switchTab({
						url: '/jvss/pages/device/home'
					})
				} else {
					uni.navigateBack({})
				}
			},
			// 查询所有设备列表
			getDeviceListByPage() {
				const data = {
					// userGroupId: uni.getStorageSync('currentGroupId'),
					// page: 1,
					// limit: 999
				};
				getApp().globalData.api.getAllDeviceList(data, (result) => {
					console.log('所有设备列表:', result);
					let sns = [];
					let tempList = []
					this.getSharedDeviceList((shareDeviceList)=>{
						tempList = [...result,...shareDeviceList]
						tempList.forEach((item) => {
							if (!item.deviceNo.includes('vir')) {
								this.deviceList.push(item)
								sns.push(item.deviceNo)
							}
						})
						if (sns.length > 0) {
							this.getDeviceToken(sns);
						}
					})
				})
			},
			//获取收到的分享设备列表
			getSharedDeviceList(callback){
				let data = {
					page:1,
					limit:999,
				}
				getApp().globalData.api.getSharedDeviceList(data, (result) => {
					callback(result.data)
				})
			},
			
			// 获取设备token
			getDeviceToken(sns) {
				const data = {
					sns: sns
				};
				getApp().globalData.api.getDeviceToken(data, (result) => {
                    let tokenList = [];
					console.log('获取设备token:', result);
                    result.forEach((pro) => {
                        tokenList.push(pro.token);
                    });
					this.deviceList.forEach((item) => {
						this.$set(item, 'isSelected', false)
						result.forEach((pro) => {
							if (item.deviceNo === pro.sn) {
								item.token = pro.token;
							}
						});
					});
                    this.getDeviceStatus(tokenList, this.deviceList)
					this.isDoorLock = isDoorLock().some(item => item === this.device.pid || this.device.parentPid)
					console.log('deviceList ===', this.deviceList);
				});
			},
            // 获取状态
            getDeviceStatus(tokenList, deviceList) {
                const data = {
                    token: tokenList
                };
                console.log(new Date(), '开始事件')
                //  getDeviceStatus  getNewDeviceStatus
                getApp().globalData.api.getDeviceStatus(data, (result) => {
                    uni.stopPullDownRefresh()
                    let sns = [];
                    result.forEach((pro) => {
                        let cacheData = uni.getStorageSync(pro.uuid)
                        if(!cacheData){
                            uni.setStorageSync(pro.uuid,{status:pro})
                        }else{
                            cacheData['status'] = pro
                            uni.setStorageSync(pro.uuid,cacheData)
                        }
                    });
                    deviceList.forEach((item) => {
                        sns.push(item.deviceNo);
                        result.forEach((pro) => {
                            if (item.deviceNo === pro.uuid) {
                                this.$set(item, 'status', pro)
                            }
                        });
                    });
                    this.deviceList = deviceList || []
                    console.log('处理后的设备列表', deviceList);
                    console.log(new Date(), '结束事件')
                    // 现根据家庭组排序
                    this.sortDevice()
                    this.showItem(this.opt, () => {
                        setTimeout(() => {
                            this.getMsgName()
                        }, 200)
                    })
                });
            },
            //根据设备状态排序
            sortDevice(){
                console.log(this.nowFamilyDeviceId, 'nowFamilyDeviceId')
                const statusOrder = ['online', 'offline', 'notfound']
                let nowList = []
                let nList = []
                this.deviceList.forEach((item, index) => {
                    this.nowFamilyDeviceId.forEach(item2 => {
                        if(item2 == item.deviceNo) {
                            nowList.push(item)
                            delete this.deviceList[index]
                        }
                    })
                })
                nowList.sort(this.compareType)
                nowList.sort((a, b) => {
                    return statusOrder.indexOf(a.status.status) - statusOrder.indexOf(b.status.status)
                })
                nList = this.deviceList.filter(item => item && Object.keys(item).length>0)
                this.deviceList = nowList.concat(nList)
                console.log(nowList,  this.deviceList,nList, 'nowList')
            },
            compareType(a, b) {
                if (a.parentPid == b.parentPid) {
                    if (a.deviceNo > b.deviceNo) {
                        return -1
                    } else if (a.deviceNo < b.deviceNo) {
                        return 1
                    } else {
                        return 0
                    }
                } else {
                    return a.parentPid > b.parentPid ? -1 : 1
                }
            },
			showDeviceList(index) {
				if (this.deviceList.length > 0) {
                    if(index == 1) {
                        this.visible1 = !this.visible1
                    } else {
                        this.visible2 = !this.visible2
                    }
				}
			},
			//选择设备
			selectDevice(item, index) {
				this.reloading = true
				this.emptyFlag = 0
				console.log('选择设备', item);
				this.page = 1
				this.device = item
                if(index == 1) {
                    this.visible1 = !this.visible1
                } else {
                    this.visible2 = !this.visible2
                }
				// this.visible = false
                let readStatus = uni.getStorageSync('readStatus')
                this.currentVideo.picUrl = ''
                this.currentVideo.url = ''
                this.onReset()
				this.deviceList.forEach((item2) => {
					if (item.deviceNo == item2.deviceNo) {
						item2.isSelected = true
					} else {
						item2.isSelected = false
					}
				})
				if (this.device.pid == EE_DEV_SMARTDOORLOCK3 || this.device.pid == EE_DEV_SMARTDOORLOCK8) {
					this.jsonAlarmMsg = AlarmMsg
				} else {
					this.jsonAlarmMsg = GeneralAlarmMsg
				}
				this.isDoorLock = isDoorLock().some(item => item === this.device.pid || this.device.parentPid)
				this.getMsgName(true)
				// this.getMsgList()
			},
			//查看图片
			lookImage(item) {
				console.log('查看图片===', item);
				let pic = {
					alarmImageUrl: item.alarmImageUrl
				}
				uni.navigateTo({
					url: './lookImage?alarmImageUrl=' + encodeURIComponent(JSON.stringify(pic))
				})
				// uni.previewImage({
				// 	urls:[item.alarmImageUrl]
				// })
			},
            // 今天时间处理
            todayTimeFn() {
                for (let i = 0; i < this.list.length; i++) {
                    console.log('this.list[i].date', this.list[i].date)
                    const day = new Date(this.list[i].date).getTime()
                    console.log('day', day)
                    const a = 24 * 60 * 60 * 1000
                    let now = moment(new Date()).format("yyyy-MM-DD")
                    now = new Date(now).getTime()
                    if (now == day) {
                        this.list[i].date = '今天'
                    } else if (day === now - a) {
                        this.list[i].date = '昨天'
                    } else {
                        // 时间处理
                        this.list[i].date = this.timeHandleFn(this.list[i].date)
                    }
                    // let a = day.format("yyyy-MM-dd")
                    console.log(now)
                }
            },

			//获取消息列表
			getMsgList(AlarmEvent, operationType, scrollTop = false, changeDevice = false) {
				uni.showLoading({
					title: '正在获取'
				})
				let token = this.device.token?this.device.token: this.deviceList[0].token
				let data = {
					sn: this.device.deviceNo?this.device.deviceNo: this.deviceList[0].deviceNo,
					startTime: this.startTime,
					endTime: this.endTime,
					AlarmEvent: AlarmEvent == 'all' ? '' : AlarmEvent,
					pageSize: 20,
					pageNum: this.page,
					// protocolFmt:'0'
				}
                this.$logs({info: '云事件详细列表设备相关参数', device: this.device, deviceList: this.deviceList, data: data})
				getApp().globalData.api.getLockAlarmMSgList(data, token, (result) => {
                    if(this.pageSize/20<=this.page) {
                        uni.hideLoading()
                    }
					uni.stopPullDownRefresh()
					// this.list = result.AlarmArray
					this.isMore = result.IsFinished == '1' ? false : true
					this.total = result.AlarmArray ? result.AlarmArray.length : 1
					// this.sourceList = result.AlarmArray ? result.AlarmArray : []
					if (this.page == 1) {
						this.sourceList = []
					}
					this.sourceList = this.sourceList.concat(result.AlarmArray)
					console.log('this.sourceList==========', this.sourceList);
					let tempList = result.AlarmArray ? result.AlarmArray : []
					let alarmIdArr = []
					let picInfoArr = []
					if (this.sourceList.length > 0) { //tempList   sourceList
						this.sourceList.forEach((item, index) => { //tempList   sourceList
							item.date = item.AlarmTime.split(' ')[0]
							item.AlarmEvent = item.AlarmEvent.split(':')[0]
							item = msgInfoPrs(item,this.jsonAlarmMsg,this.editInfo)
							// 播放状态：播放1，暂停0，停止-1
							this.$set(item, 'status', -1)
							this.$set(item, 'key', index)
							if (item.PicInfo && item.PicInfo.ObjName) {
								alarmIdArr.push(item.AlarmId)
							}
                            // else if(item.PicErr) {
                            //     item.alarmImageUrl = this.pviewUrl
                            // }
                            else {
								this.$set(item, 'alarmImageUrl', '')
								// this.$set(item, 'alarmImageUrl',
								// 	'https://statics.xmcsrv.net/weixin/defaultMsgBg2.png')
							}
							picInfoArr.push({
								ObjName: (item.PicInfo && item.PicInfo.ObjName) ? item.PicInfo
									.ObjName : '',
								StorageBucket: (item.PicInfo && item.PicInfo.StorageBucket) ? item
									.PicInfo.StorageBucket : ''
							})
							item.selected = false;
							item.AlarmMsgIcon = AlarmMsgIcon(item)//图标
                            if (index === 0) {
                                let isSelectedNum = 0
                                this.sourceList.forEach((now, i) => {
                                    if(now.AlarmId == this.queryAlarmId) {
                                        isSelectedNum++
                                        this.num = i
                                    }
                                })
                                if(isSelectedNum) {
                                    // console.log('走这里了123，新UI跳转第一条不选中', this.sourceList)
                                    // this.sourceList[this.num].selected = true
                                } else {
                                    // console.log('走这里了345, 默认被选中第一条', this.num)
                                    if(!this.num) item.selected = true
                                }
							}
							if (this.type == 3) {
								if ((this.selectedAlarmEvent == 'DoorLockCall' || this
										.selectedAlarmEvent == 'DoorLockAlarm')) {
									if (this.selectedAlarmId == item.AlarmId && this.page == 1) {
										item.selected = true
										this.isTap = true
										this.maskType = 2
										this.$refs.dataPopup.open()
										let time = this.timeFormat(item.AlarmTime)
										let data1 = {
											startTime: time[0],
											stopTime: time[1]
										}
										if (item.VideoInfo) {
											this.getVideoUrl(data1,item)
										} else if (item.PicInfo) {
											this.getImgUrl([item.AlarmId], token,'', (data) => {
												this.currentVideo.picUrl = data[0].url
												this.currentVideo.key = item.key
											})
										}
									}
								}
							}
                            else {
                                if(changeDevice && index == 0 && this.isTap) {
                                    let time = this.timeFormat(item.AlarmTime)
                                    let data1 = {
                                        startTime: time[0],
                                        stopTime: time[1]
                                    }
                                    if (item.VideoInfo) {
                                        this.getVideoUrl(data1,item)
                                    } else if (item.PicInfo) {
                                        this.getImgUrl([item.AlarmId], token,'', (data) => {
                                            this.currentVideo.picUrl = data[0].url
                                            this.currentVideo.key = item.key
                                        })
                                    }
                                }
                            }
						})
						if (!this.isHeight) {
							// this.getClineHeight()
						}
						if (result.AlarmArray.length > 0 && result.AlarmArray[0].VideoInfo) {
							let time = this.timeFormat(result.AlarmArray[0].AlarmTime)
							let data1 = {
								startTime: time[0],
								stopTime: time[1]
							}
							// this.getVideoUrl(data1)
						}
						// this.sourceList = tempList
						tempList = this.sourceList
						this.list = this.sortArray(tempList);
						console.log(this.list, '日期测试')
                        this.todayTimeFn()
						// if(this.filterTypeItem.value == 'all'){
						// 	this.list = this.sortArray(tempList);
						// }
						// 获取报警图
                        if(this.pageSize/20>this.page) {
                            console.log(this.pageSize/20, this.page, '当前条数')
                            this.page++
                            this.getMsgList((this.filterTypeItem && this.filterTypeItem.value) || 'all', '')
                            return
                        }
						if (alarmIdArr.length > 0) {
							console.log('获取报警图img2', this.type)
							this.getImgUrl(alarmIdArr, token,operationType, ()=>{},scrollTop)
							if (result.AlarmArray.length) {
								this.timeFormat(result.AlarmArray[0].AlarmTime)
							}
						}
					} else {
						this.list = [];
						this.currentVideo.picUrl = '';
						this.currentVideo.url = '';
					}
					this.emptyFlag = 1;
					
				});
			},
			// 时间处理函数
			timeHandleFn(time) {
				let arr = time.split('-')
				let str = arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
				return str
			},
			//获取报警图片
			getImgUrl(data, token,operationType, callback,scrollTop = false) {
				getApp().globalData.api.getPicUrl(data, token, (result) => {
					let idArr = data
					idArr.forEach((item1, index1) => {
						result.forEach((item2, index2) => {
							// if (index1 == index2) {
							// 	this.$set(item2, 'alarmId', item1)
							// }
							let picStr = item2.url.split('?')[0].split('_')
							let alarmId = picStr[picStr.length - 1].split('.')[0]
							if (alarmId == item1) {
								this.$set(item2, 'alarmId', alarmId)
							}
						})
					})
					console.log('报警图片===', result);
					this.sourceList.forEach((item, index) => {
						result.forEach((urlItem) => {
							if (item.AlarmId == urlItem.alarmId) {
								this.$set(item, 'alarmImageUrl', urlItem.url)
							}
						})
					})
					if (this.list.length > 0) {
						console.log('判断')
						if (this.list[0].origin[0].isCapture && this.isTap) {
                            if(!scrollTop) {
                                this.currentVideo.picUrl = this.list[0].origin[0].alarmImageUrl ? this.list[0].origin[
                                    0].alarmImageUrl : ''
                            }

							this.currentVideo.key = this.list[0].origin[0].key || ''
                            this.sourceList[this.num].selected = true
                            let tempList = this.sourceList
                            this.list = this.sortArray(tempList);
                            this.todayTimeFn()
							if(operationType == 'MSG'){
								this.list[0].origin[0].selected = false
							}
							if (this.type == 3) {
								this.list[0].origin[0].selected = false
								let i
								this.sourceList.forEach((item, index) => {
									if (this.selectedAlarmId == item.AlarmId) {
										i = index
									}
								})
								this.list[0].origin[i].selected = true
							}
							if (this.pullDownRefresh) {
								this.list[0].origin.forEach(item => {
									item.selected = false
								})
								this.list[0].origin[0].selected = true
                                // console.log('不知道的origin', this.list[0].origin[0])
                                this.itemClick(this.list[0].origin[0])
                                this.pullDownRefresh = false
							}
						}
					}
					console.log(this.list[0].origin[0],'this.list')
					if(operationType == 'MSG'){
						if(this.list.length>0){
							this.itemClick(this.list[0].origin[0])
						}
					}
					if (this.queryAlarmId) {
                        if(this.pullDownRefresh) return
						this.list.forEach((item) => {
							item.origin.forEach((item2) => {
								if (item2.AlarmId == this.queryAlarmId && !scrollTop) {
									this.itemClick(item2)
								}
							})
						})
					}
					if (typeof callback === 'function') {
						callback(result)
					}
				});
			},
			//获取报警视频
			getVideoUrl(data, item, callback) {
                uni.showLoading({
                    mask:true,
                    title:'加载中...'
                })
				data.clientSystem = 'ios' //uni.getSystemInfoSync().osName
				let token = this.device.token?this.device.token: this.deviceList[0].token
                // console.log(token, this.device, '设备video信息');
                this.$logs({info: '获取video地址相关信息', device: this.device, deviceList: this.deviceList, data: data})
                // getVideoUrl  downloadVideo
				getApp().globalData.api.getVideoUrl(data, token, (result) => {
					// uni.hideLoading();
					// setTimeout(()=>{
					// 	uni.hideLoading();
					// },1000)
					console.log('报警视频', result,item);
					// this.currentVideo.url = result.url
					this.currentVideo.picUrl = item ? item.alarmImageUrl : ''
					this.currentVideo.key = item.key
					if (typeof callback === 'function') {
						callback(result.url)
					}
					let system = uni.getSystemInfoSync().osName
					if(system == 'ios'){
						wx.downloadFile({
							url: result.url, 
							success:(res)=>{
								console.log('下载视频到本地播放11',res);
								if (res.statusCode === 200) {
									this.currentVideo.url = res.tempFilePath
									// console.log('下载视频到本地播放',res.tempFilePath);
									uni.hideLoading()
								}
							},
							fail: (err) => {
								console.log('下载失败',err);
							}
						})
					}else{
						uni.hideLoading()
						this.currentVideo.url = result.url
					}
				});
			},
			// 获取报警视频
			getVideoUrl2(data, item, callback) {
				data.fileFormat = 'mp4'
				let token = this.device.token
				getApp().globalData.api.downloadVideo(data, token, (result) => {
					console.log('报警视频', result);
					this.currentVideo.url = result.data
					const fs = wx.getFileSystemManager()
					let time = String(new Date().getTime())
					let path = wx.env.USER_DATA_PATH + `/video${time}.mp4`
					fs.writeFile({
						filePath: path,
						data: result.data,
						encoding: 'binary',
						success: (e) => {
							console.log('写进文件成功===', e, path);
							this.currentVideo.url = path
							if (typeof callback === 'function') {
								callback(path)
							}
						}
					})
				});
			},
			//长按消息列表
			longPressAction(item) {
				console.log('长按', item);
				this.messageInfo = item
				this.messageInfo.sn = this.device.deviceNo
				let canEdit = msgTypeIsEditArr().some(i => i === item.MsgType)
				if (canEdit) {
					this.isEdit = true
				} else {
					this.isEdit = false
				}
				if (!item.isCapture || !item.alarmImageUrl) {
					this.isShowShare = false
				} else {
					this.isShowShare = true
				}
				this.isDownloadPic = true
				if (item.VideoInfo) {
					let time = this.timeFormat(item.AlarmTime)
					let data = {
						startTime: time[0],
						stopTime: time[1]
					}
					this.videoData = data
					this.isDownloadPic = false
				}
				this.messageItem = item
				this.$refs.popupLong.open('bottom')
				this.isTouch = false
			},
			longChang(e) {
				if (e == 'delete') {
					this.deleteLockAlarmMSg(this.messageItem)
					this.$refs.popupLong.close()
					this.isTouch = true
				} else if (e == 'share') {
					// this.shareVideo()
                    if(this.isShowShare) {
                        if (this.messageItem.VideoInfo) {
                            this.getVideoUrl(this.videoData, this.messageItem, (res) => {
                                this.downloadUrl = res
                                this.shareVideo(res, 'video')
                            })
                        } else {
                            this.shareVideo(this.messageItem.alarmImageUrl, 'pic')
                        }
                    } else {
                        uni.showToast({
                            title: '无图片信息',
                            icon: 'none'
                        })
                    }

				} else if (e == 'editName') {
					uni.navigateTo({
						url: './editMsgName?message=' + encodeURIComponent(JSON.stringify(this.messageInfo))
					})
					this.$refs.popupLong.close()
				}
			},
			shareVideo(url, type) {
				console.log('分享===', url);
				let shareName = new Date().valueOf();
				let videoType = '.mp4' //uni.getSystemInfoSync().osName == 'ios'?'.mp4':'.m3u8'
				if (type == 'video') {
					shareName = shareName + videoType
				} else {
					shareName = shareName + '.png'
				}
				let that = this
				let filePath = wx.env.USER_DATA_PATH + '/' + shareName
				let e = this.messageItem;
				let shareName2 = this.getFileName(url) //this.getFileName(e.alarmImageUrl)
				let fileType = shareName2.substring(shareName2.lastIndexOf(".") + 1)
				console.log('路径==', filePath);
				console.log('类型==', fileType);
				wx.downloadFile({
					url: url, // 下载url
					filePath: filePath,
					success: (res) => {
						console.log('ressss', res)
						if (res.statusCode == 200) {
							if (type == 'video') {
								wx.shareVideoMessage({
									videoPath: res.filePath,
									success: (res) => {
										uni.showToast({
											title: '操作成功',
											icon: 'none'
										})
										this.$refs.popupLong.close()
									},
									fail: console.error,
								})
							} else {
								wx.showShareImageMenu({
									path: res.filePath,
									success: (res) => {
										uni.showToast({
											title: '操作成功',
											icon: 'none'
										})
										this.$refs.popupLong.close()
									},
									fail: (err) => {}
								})
							}
						}
					},
					fileName: '导出文件',
					fail: console.error,
				})
			},
			shareFile(filePath, fileType) {
				wx.shareFileMessage({
					filePath: filePath,
					fileType: fileType,
					fileName: filePath,
					success(data) {
						console.log('转发成功！！！', data)
					},
					fail: console.error,
				})
			},
			getFileName(url) {
				let name = "";
				if (url !== null && url !== "") {
					name = url.substring(url.lastIndexOf("/") + 1);
					name = name.substring(0, name.indexOf("?"));
				} else {
					name = "无";
				}
				return name;
			},
			//获取昵称
			getMsgName(changeDevice = false) {
                // console.log(this.device.deviceNo, this.deviceList[0].deviceNo, 'this.device.deviceNo')
                if(!this.device.deviceNo) {
                    this.device = this.deviceList[0]
                }
				const data = {
					deviceSn: this.device.deviceNo? this.device.deviceNo: this.deviceList[0].deviceNo
				};
                this.$nextTick(() => {
                    getApp().globalData.api.getLockAlarmMSgName(data, (result) => {
                        this.editInfo = result
                        this.getMsgList('', '', false, changeDevice)
                    });
                })
			},
			//删除消息
			deleteLockAlarmMSg(item) {
				console.log('deleteLockAlarmMSg====', item, this.currentVideo);
				let data = {
					sn: this.device.deviceNo,
					delType: 'MSG ',
					alarmIds: [item.AlarmId]
				}
				let token = this.device.token
				uni.showModal({
					content: '确定要删除报警消息么？',
					success: (res) => {
						if (res.confirm) {
							getApp().globalData.api.deleteLockAlarmMSg(data, token, (result) => {
								console.log('删除消息', result);
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								if (item.key == this.currentVideo.key) {
									this.currentVideo.picUrl = ''
									this.currentVideo.url = ''
								}
								this.page = 1
								this.getMsgList()
								uni.$emit('deleteCloudMsg')
							});
						}
					}
				})
			},
			//时间转化
			timeFormat(date) {
				let time = new Date(date.replace(/-/g, '/'))
				let transferTime1 = time.getTime() - 10 * 1000
				let transferTime2 = time.getTime() + 10 * 1000
				let newDate = formatDate(new Date(transferTime1))
				return [formatDate(new Date(transferTime1)), formatDate(new Date(transferTime2))]
			},
			//选中某条播放视频
			itemClick(item) {
                if(!item.VideoInfo) this.videoInfo = ''
				console.log(item,'item');
                this.alarmEvent = item.AlarmEvent
                this.MsgType = item.MsgType
				if (!this.isTap) {
					if (!item.isCapture) {
						return
					} else {
                        this.showDevice = true
					}
				}
				this.isTap = true
				this.maskType = 2
				this.$refs.dataPopup.open()
				if (!item.selected) {
					this.list.forEach((item2) => {
						item2.origin.forEach((item3, index) => {
							if (item.AlarmId == item3.AlarmId) {
								item3.selected = true
							} else {
								item3.selected = false
							}
						})
					})
					this.list = this.list.map((item2) => {
						item2.origin.map((item3, index) => {
							if (item.AlarmId == item3.AlarmId) {
								item3.selected = true
							} else {
								item3.selected = false
							}
						})
						return {
							...item2
						}
					})
					console.log(this.list);
					let time = this.timeFormat(item.AlarmTime)
					let data = {
						startTime: time[0],
						stopTime: time[1]
					}
					if (item.isCapture) {
						if (item.VideoInfo) {
							this.getVideoUrl(data, item)
						} else if (item.PicInfo) {
							uni.hideLoading()
							this.currentVideo.picUrl = item.alarmImageUrl ? item.alarmImageUrl : ''
							this.currentVideo.url = ''
						} else {
							this.currentVideo.picUrl = ''
							this.currentVideo.url = ''
						}
					} else {
						this.currentVideo.picUrl = ''
						this.currentVideo.url = ''
					}
					this.currentVideo.key = item.key
				} else {
					if (item.isCapture) {
						if (item.VideoInfo) {
							if (this.first) {
								let time = this.timeFormat(item.AlarmTime)
								let data = {
									startTime: time[0],
									stopTime: time[1]
								}
								this.getVideoUrl(data, item)
								this.first = false
							} else {
								uni.showToast({
									title: '正在播放该视频'
								})
							}
						} else if (item.PicInfo) {
							uni.hideLoading()
							this.currentVideo.picUrl = item.alarmImageUrl ? item.alarmImageUrl : ''
							this.currentVideo.url = ''
						} else {
							this.currentVideo.picUrl = ''
							this.currentVideo.url = ''
						}
					} else {
						this.currentVideo.picUrl = ''
						this.currentVideo.url = ''
					}
					this.currentVideo.key = item.key
				}
			},
			//改变弹框高度
			changeHeight() {
				this.isChange = !this.isChange
				const topBarHeight = (this.modelType == 'pad' ? 54 : 44)
				if (this.isChange) {
					this.popupHeight = (this.tempHeight + 4 + 150) + 'px'
					this.scrollViewHeight = (this.tempHeight + 150 - 50) + 'px'
					this.videoHeight = this.windowHeight - (this.tempHeight + 150) - this.statusBarHeight - topBarHeight
					if (this.currentVideo.url) {
						console.log(this.$refs)
						this.$refs.video.handleFn(0)
					}
				} else {
					this.popupHeight = this.tempHeight + 4 + 'px'
					this.scrollViewHeight = (this.tempHeight - 50) + 'px'
					this.videoHeight = 300
					if (this.currentVideo.url) {
						console.log(this.$refs)
						this.$refs.video.handleFn(1)
					}
				}
			},
			//预览图片
			previewImage(url) {
				if (url) {
					this.imgs = [url] //imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行
					setTimeout(() => {
						this.$refs.previewImage.open(url); // 传入当前选中的图片地址
					}, 100)
				}
			},
			//日期选择
			change(ev) {
				console.log('change事件:', ev);
				this.range = ev
				this.day = getDiffDay(this.range[0], this.range[1]) + 1
				console.log(typeof this.day);
				this.startTime = this.range[0] + ' ' + '00:00:00'
				this.endTime = this.range[1] + ' ' + '23:59:59'
				// this.sourceList = []
				// this.tempList = []
				this.list = []
                this.num = 0
				if (!(this.type == 2 && this.deviceList.length == 0)) {
                    this.page = 1
					this.getMsgList(this.filterTypeItem.value, this.isTap?'MSG':'')
                    console.log(this.sourceList, this.deviceList, 'sdlist')
                    setTimeout(() => {
                        this.queryAlarmId = ''
                        // this.list[0].origin[0].selected = true
                        if(this.sourceList.length) {
                            this.sourceList[0].selected = true
                        }
                        console.log(1232)
                    })
				}
			},
			maskClick(ev) {
				console.log('maskClick事件:', ev);
			},
			//显示消息弹框
			showMsg() {
				this.isShowMsg = true
				this.$refs.popup.open('bottom')
			},
			//选择消息类型
			selectMsgType(item) {
				if(this.filterTypeItem.value == item.value){
					this.closePopup()
					return
				}
				this.page = 1;
				this.filterTypeItem = item;
				console.log('选择消息类型==', this.type, this.filterTypeItem);
				if (!(this.type == 2 && this.deviceList.length == 0)) {
					this.getMsgList(item.value, this.isTap?'MSG':'')
                    setTimeout(() => {
                        console.log(1232)
                        this.queryAlarmId = ''
                        this.num = 0
                        // this.list[0].origin[0].selected = true
                        console.log(this.list[0].origin)
                    })
				}
				this.typeList.forEach((item2) => {
					if (item2.id == item.id) {
						// item2.selected = !item2.selected
						item2.selected = true
					} else {
						item2.selected = false
					}
				})
				console.log(this.typeList)
				this.msgType = item.title
				let arr = []
				console.log('选择', this.list);
				this.closePopup()
			},
			// 按日期分类
			sortArray(beforeData) {
				let tempArr = [];
				var afterData = [];
				for (let i = 0; i < beforeData.length; i++) {
					beforeData[i].date = beforeData[i].date
					if (tempArr.indexOf(beforeData[i].date) === -1) {
						afterData.push({
							date: beforeData[i].date,
							origin: [beforeData[i]]
						});
						tempArr.push(beforeData[i].date);
					} else {
						for (let j = 0; j < afterData.length; j++) {
							if (afterData[j].date == beforeData[i].date) {
								afterData[j].origin.push(beforeData[i]);
								break;
							}
						}
					}
				}
				console.log(afterData, 'afterData');
				return afterData
			},
			// 搜索查询
			fuzzyQuery(list, keyword) {
				var reg = new RegExp(keyword);
				var arr = [];
				for (var i = 0; i < list.length; i++) {
					if (reg.test(list[i].AlarmEvent)) {
						arr.push(list[i]);
					}
				}
				return arr;
			},
			// 关闭弹框
			closePopup() {
				this.isShowMsg = false
				this.$refs.popup.close()
				this.$refs.popupLong.close()
				this.isTouch = true
			},
			//播放结束
			ended(ev) {
				console.log('播放结束：', ev, this.currentVideo);
				// if (this.onStop) {
				// 	this.closeLivestream()
				// 	this.videoContext = null
				// }
			},
			// 停止设备码流
			closeLivestream(callback) {
				const token = this.device.token;
				const data = {
					channel: '0',
					stream: '0'
				};
				getApp().globalData.api.closeLivestream(data, token, (result) => {
					console.log('停止设备码流:', result);
				});
			},
			isJSON(str) {
				if (typeof str == 'string') {
					try {
						var obj = JSON.parse(str);
						if (typeof obj == 'object' && obj) {
							return true;
						} else {
							return false;
						}
					} catch (e) {
						return false;
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	// /deep/.uni-calendar__header-text{
	// 	color: #007aff;
	// }
	/deep/.popup-x-body {
		margin-top: -750rpx !important;
	}

	.popBox {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/deep/.uni-navbar__header-container {
		align-items: center;
	}

	/deep/.dataPopup {
		z-index: 11;
		// [name=mask]{
		// 	inset:400px !important;
		// 	background: transparent !important;
		// 	display: none !important;
		// }
	}

	/deep/.dataPopup {
		[name=content] {
			bottom: 100rpx !important;
		}
	}

	.dataPopup {
		/deep/.uni-popup {
			z-index: 11 !important;
		}
	}

	.msgPopup {
		/deep/.uni-popup {
			z-index: 99;
		}
	}

	/deep/ .cell-headline {
		text-align: left;
		min-height: 22px;
		padding: 0px;
	}

	.sticky {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: 1rpx;
		// width: 100%;
		z-index: 13;
		width: 200rpx;
	}

	.navTitle {
		max-width: 70%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.selectDevice {
		position: absolute;
		background: white;
		top: 64px;
		//left: 50%;
		//margin-left: -240rpx;
        margin-left: 10px;
		// right: 0rpx;
		width: 480rpx;
		max-height: 480rpx;
		// height: 480rpx;
		z-index: 999;
		border-radius: 10rpx;
		padding: 15rpx;
		overflow: scroll;

		.selectItem {
			padding-bottom: 10rpx;
			height: 50rpx;
			color: #333;
		}

		.border {
			border-bottom: 1px solid #f1f1f1;
		}

		.selected {
			color: #FF0025;
		}
	}
    .selectDevice2 {
        left: 50%;
        transform: translateX(-50%);
    }

	.headerFixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 64px;
		z-index: 11;
	}

	.header {
		width: 100vw;
		// min-height: 650rpx;
		// height: 750rpx;
		height: 300px;
		background: #000000;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.8s;

		video {
			transition: all 0.8s;
		}

		.img {
			width: 120rpx;
			height: 120rpx;
		}
        .img2 {
            width: 300rpx;
            height: 300rpx;
        }

		.previewPic {
			width: 100vw;
			// height: 750rpx;
			//height: 300px;
			height: 100%;
		}
	}

	.bottomV {
		// padding: 40rpx;
		// position: relative;
		// background: #f5f7fb;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 10px 20px;
		z-index: 12;

		.date {
			width: 130px;
			height: 30px;
			// border: 1rpx solid #A4A4A5;
			border-radius: 12rpx;
			// background: #C8C8C8;

			.icon {
				width: 20px;

				image {
					width: 15px;
					height: 15px;
				}
			}

			.calendar {
				height: 29px;
				// border-left: 1rpx solid #A4A4A5;
				// border-right: 1rpx solid #A4A4A5;
				width: 80px;
				color: black;

				image {
					width: 20px;
					height: 20px;
					margin-right: 10rpx;
				}
			}
		}

		.msg {
			align-items: center;
			margin-left: 30rpx;

			text {
				margin-right: 10rpx;
				color: #5A5A5A;
				font-size: 26rpx;
			}
		}

		.chooseMsgType {
			position: absolute;
			left: -40rpx;
			right: -40rpx;
			top: 60rpx;
			background: white;
			z-index: 99;
			padding: 30rpx;

			.msgType {
				height: 60rpx;
				color: #000;
				opacity: 0.8;
			}

			.b-line {
				height: 1rpx;
				background: #e5e5e5;
				margin: 20rpx 0;

			}
		}
	}

	.noData {
		margin-top: 680rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.step {
		// /deep/ .uni-scroll-view {
		//     -webkit-overflow-scrolling: auto;
		// }
		// margin: 650rpx 30rpx 30rpx 30rpx;
		// margin: 50rpx 30rpx 30rpx 30rpx;
		padding-bottom: 0rpx;

		.pullUp {
			position: sticky;
			background: #F5F4F5;
			left: 0rpx;
			right: 0rpx;
			top: 0rpx;
			// height: 100rpx;
			//height: 60px;
			//height: 58rpx;
			z-index: 12;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 53px;
				height: 31rpx;
				margin: auto;
			}
		}

		.con {
			flex-direction: row-reverse;
			display: flex;
		}

		.itemList {
			// padding: 40rpx;
			width: 90%; // 100%;
			margin-right: 20rpx; //60rpx;
			// padding-bottom: 20rpx;

			.title {
				//position: sticky;
				//top: 30rpx;
				background: #FF0025;
				width: 225rpx;
				height: 58rpx;
				border-radius: 12rpx;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: -50rpx;
				// margin-top: 20rpx;
				z-index: 13;
				font-size: 26rpx;
			}

			.title1 {
				position: sticky;
				//top: 30rpx;
				top: 0;
				background: #FF0025;
				width: 225rpx;
				height: 58rpx;
				border-radius: 12rpx;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: -50rpx;
				// margin-top: 20rpx;
				z-index: 13;
				font-size: 26rpx;
			}

			.action {
				background: #FF0025;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;
				font-size: 26rpx
			}

			.del {
				background: red;
			}

			.item {
				background: white;
				display: flex;
				justify-content: space-between;
				// padding: 0 30rpx;
				border-bottom: 1px solid #E8E8E8;
				margin-top: 20rpx;
				border-radius: 15rpx;
				width: 100%;

				/deep/.cell {
					border-radius: 15rpx;
					overflow: hidden;
				}

				.msg {
					color: #000000;
					font-weight: bold;
					font-size: 30rpx;
				}

				.all {
					color: #989898;
					font-size: 26rpx;
				}

				.pic {
					width: 122rpx;
					height: 100rpx;
				}

				.play {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					//right: 80rpx;
					//top: 50rpx;
					left: 50%;
                    top: 50%;
					transform: translate(-50%, -50%);
				}

				.time {
					color: #5A5A5A;
					font-size: 26rpx;
				}

				.type {
					color: #FF0025;
					font-size: 26rpx;

				}
			}
		}

		.line {
			background: #939393;
			width: 10px;
			position: relative;
			// height: 40rpx;
			margin-left: -40rpx;
		}

		.step-container {
			/* #ifndef APP-NVUE */
			display: inline-flex;
			/* #endif */
			width: 30px;
			flex-direction: column;
		}

		.step-line-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			// flex-direction: column;
			flex: 1;
			align-items: center;
			justify-content: center;
		}

		.leftLine {
			height: 100%;
			background: #D9D9D9;
			width: 1px;
			margin-right: 14.5px;
		}

		.step-line {
			width: 1px;
			background: #D9D9D9;
		}

		.step-line--after {
			flex: 1;
			transform: translate(0px, 1px);
			margin-top: 110rpx;
		}

		.step-line--after2 {
			// transform: translate(0px, 40px);
			transform: translate(0px, -45px);
		}

		.step-line--after3 {
			transform: translate(0px, -45px);
		}

		.step-line--before {
			height: 10px;
			width: 10px;
			background: #FF0025;
			border-radius: 10rpx;
			position: absolute;
			// left: 45rpx;
			left: 25rpx;
			z-index: 10;
			// top: 20rpx;
			// transform: translate(0px, 100px);
		}

		.step-circle {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #FF0025;
			margin: 4px 0px 5px 0px;
		}

		.step-check {
			height: 14px;
			line-height: 14px;
			margin: 2px 0px;
		}

	}

	.popup-content {
		.msgType {
			height: 60rpx;
			color: #666;
		}

		.b-line {
			height: 1rpx;
			background: #e5e5e5;
			margin: 20rpx 0;

		}
	}

	.video-list {
		width: 100vw;
		height: 40vw;
		white-space: nowrap;
	}

	.video {
		display: inline-block;
		width: 30vw;
		height: 30vw;
		overflow: hidden;
		border: 1px solid #999999;
		margin: 20rpx;
	}

	.video-control {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	.video-nothing {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	.pullUp1 {
		height: 72rpx;
	}

	// .pullUp {
	// 	position: absolute;
	// 	background: #F5F4F5;
	// 	left: 0rpx;
	// 	right: 0rpx;
	// 	top: 0rpx;
	// 	height: 100rpx;
	// 	z-index: 999;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;

	// 	image {
	// 		width: 106rpx;
	// 		height: 62rpx;
	// 		margin: auto;
	// 	}
	// }
	.box {
		// height: 620rpx;
		overflow: auto;
		background: #f8f8f8;
	}

	.box1 {
		transition-property: all;
		transition-duration: .8s;
	}

	.icon-box {
		width: 32px;
		height: 32px;
		margin: 0 10px 0 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
		/*  #ifdef  H5  */
		img{
			width: 100%;
			height: 100%;
		}
		/*  #endif  */
	}

	.title-box {
		width: 100%;
		height: 78rpx;
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 16;
		background-color: #f5f7fb;

		.title {
			position: sticky;
			//top: 30rpx;
			top: 0;
			background: #FF0025;
			width: 225rpx;
			height: 58rpx;
			border-radius: 12rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 4rpx;
			// margin-top: 20rpx;
			z-index: 13;
			font-size: 26rpx;
		}
	}
    .img-box {
        position: relative;
        margin-right: 30rpx;
        border-radius: 4px;
        border: 2px solid #ddd;
        overflow: hidden;
        width: 40px;
        height: 56px;
        vertical-align:middle;
        .pic1 {
            width: 40px;
            height: 56px;
            display: block;
            font-size: 0;
        }
    }

    .content-box {
        width: 100vw;
        height: 100vh;
        //background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        .tab-bar-box {
            width: 100%;
            height: 70px;
            color: #D2D2D2;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
            .tab-bar-item {
                width: 50%;
                height: 100%;
                background-color: #fff;
                text-align: center;
                line-height: 140rpx;
                position:relative;
                .point {
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background-color: #FF0025;
                    position: absolute;
                    left: 50%;
                    top: 78%;
                    transform: translate(-50%, -50%);
                }
            }
            .active {
                color: #FF0025;
            }

            //.tab-bar-item::after {
            //    content: '';
            //    width: 3px;
            //    height: 3px;
            //    border-radius: 50%;
            //    background-color: red;
            //    position: absolute;
            //    left: 50%;
            //    top: 72%;
            //    transform: translate(-50%, -50%);
            //}
        }
        .tab-swiper-box {
            width: 100vw;
            overflow: hidden;
            .tab-swiper {
                width: 100%;
                height: 100%;
            }
        }

    }
    .img-point {
        width: 10px;
        height: 10px;
        position: absolute;
        top: 35%;
    }

    .system-msg {
        font-size: 14px;
        color: #9c9c9c;
        .system-msg-card {
            width: 95%;
            height: 75px;
            margin: 20rpx auto;
            box-sizing: border-box;
            border-radius: 8px;
            background-color: #fff;
            padding: 10px 12px;
            .msg-card-time {
                margin-bottom: 10px;
                font-size: 14px;
            }
            .msg-card-content {
                color: #000;
                font-size: 15px;
            }
        }
    }
    .long-title {
        width: 100%;
        text-align: center;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
</style>
